import moduleImg from '@/assets/image/screenshot/module.png';

## 主な構成要素#main-components

PageSpyは以下の3つのモジュールで構成されています：

- デバッグクライアント：[HuolalaTech/page-spy-web](https://github.com/HuolalaTech/page-spy-web)リポジトリに対応します。開発者が使用し、オンラインデバッグやオフラインリプレイなどの様々なデバッグ機能パネルを提供します。
- SDK：[HuolalaTech/page-spy](https://github.com/HuolalaTech/page-spy)リポジトリに対応します。クライアントアプリケーションの実行時データを収集してサーバーに送信し、サーバーからデバッグクライアントに転送します。
- サーバー：[HuolalaTech/page-spy-api](https://github.com/HuolalaTech/page-spy-api)リポジトリに対応します。両端のメッセージを中継し、データを保存します。

三つのモジュール間のインタラクション図は以下の通りです：

<a href={moduleImg} target="_blank">
  <img alt="システムモジュール図" src={moduleImg} />
</a>

## 複数のデプロイメントソリューション#deployments

使いやすさとデータの安全性を確保するため、PageSpyは複数のすぐに使える**ワンクリックデプロイメントソリューション**を提供しています。実際の状況に応じて適切なデプロイメント方法を選択できます。

- [Node.js でデプロイ](./deploy-with-node)
- [Docker でデプロイ](./deploy-with-docker)
- [宝塔パネルにインストール](./deploy-with-baota)
